<template>
  <div>
    <div class="top">
      <span @click="chaegs()">我的发票</span>
      <span>></span>

      <span style="color: #ffbe37">详情</span>
    </div>
    <div class="center">
      <div class="cr_info1">
        <p class="x5TXt">发票信息</p>
        <div class="layer">
          <div class="dlex2-div">
            <span class="txt1"
              >开票状态：<a>{{
                invoiceDetails.status == "01" ? "已开票" : " 开票中"
              }}</a></span
            >
            <span class="txt1"
              >申请时间：<a>{{ invoiceDetails.createDate }}</a></span
            >
          </div>
          <div class="dlex2-div">
            <span class="txt1"
              >抬头类型：<a>{{
                invoiceDetails.invoiceType == "01" ? "个人" : "企业"
              }}</a></span
            >
            <span class="txt1"
              >发票抬头：<a>{{ invoiceDetails.invoiceHead }}</a></span
            >
          </div>
          <div class="dlex2-div">
            <span class="txt1"
              >发票金额：<a>￥{{ invoiceDetails.totalPrice }}</a></span
            >
            <span class="txt1"
              >商品明细：<a>{{ invoiceDetails.invoiceHead }}</a></span
            >
          </div>
          <div class="dlex2-div">
            <span class="txt1">关联订单：<a>已支付</a></span>
          </div>
        </div>
      </div>

      <!-- 发票信息 -->

      <!-- <div class="cr_info1">
        <p class="x5TXt">发票信息</p>
        <div class="layer">
          <div class="dlex2-div">
            <span class="txt1">抬头类型：<a>企业单位</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">发票抬头：<a>北京华夏元道科技有限公司</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">识别号：<a>12324jksdhfkjdshnf</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">电子邮箱：<a>213124324@qq.com</a></span>
          </div>
        </div>
      </div> -->

      <!-- 订单信息 -->

      <div class="cr_info1">
        <p class="x5TXt">补发/更换信息</p>
      </div>
      <div class="fatxt">
        <span
          >实付：<a>¥ {{ invoiceDetails.totalPrice }}</a></span
        >
      </div>
    </div>
    <div
      class="bottom dlex2-div"
      v-if="
        invoiceDetails.payStatus == null ||
        invoiceDetails.payDate == null ||
        invoiceDetails.payCode == null
      "
    >
      <div class="grey">
        <div class="dlex1-div">
          <div class="yellowBar"></div>
          <span class="titleTxt2">可选操作</span>
        </div>
        <div class="dlex3-div">
          <a-button
            class="dlex_btn"
            @click="selTicket(invoiceDetails)"
            type="primary"
          >
            补发
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detFlag: Boolean,
  },
  data() {
    return {
      selBorder: true,
      selvalue: true,
      // 详情
      invoiceDetails: {},
    };
  },
  methods: {
    chaegs() {
      this.$emit("changeComponent1Data", true);
    },
    // 查询发票详情
    getInvoice(e) {
      this.$ajax({
        url: "/user/invoice/record/get",
        method: "post",
        params: {
          invoiceNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.invoiceDetails = res.data;
        } else {
        }
      });
    },

    // 补票功能，当场重开
    selTicket(e) {
      e.invoiceNature = "02";
      this.$ajax({
        url: "/user/invoice/record/save",
        method: "post",
        params: e,
      }).then((res) => {
        if (res.code == 200) {
          // console.log(res.msg);
          this.$message.success('操作成功，请耐心等候。');
        } else {
          this.$message.error('操作失败，请稍后再试。');
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  span {
    margin-left: 5px;
    font-size: 12px;
    font-family: PingFang SC;
    color: #999999;
    cursor: pointer;
  }
  span:nth-child(1) {
    margin-left: 0px;
  }
}
.center {
  width: 100%;
  overflow: hidden;
  .cr_info1 {
    width: 100%;
    margin-top: 24px;
    overflow: hidden;
    .layer {
      width: 100%;
      padding: 20px;
      border-bottom: #eeeeee 1px solid;
      .dlex2-div {
        margin-bottom: 24px;
      }
      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        color: #999999;
        flex: 1;
        a {
          color: #333333;
        }
      }
      .txt2 {
        font-size: 14px;
        font-family: PingFang SC;
        color: #999999;
        a {
          color: #333333;
        }
      }
    }
  }
  .fatxt {
    margin-top: 16px;
    float: right;
    span {
      font-size: 14px;
      font-family: PingFang SC;
      color: #999999;
      a {
        color: #ca0000;
      }
    }
  }
}

.x5TXt {
  display: block;
  width: 100%;
}
.image {
  width: 144px;
  height: 81px;
  border: #eeeeee solid 1px;
}
.basics {
  width: 600px;
  margin-left: 32px;
}
.titleTxt2 {
  font-size: 15px;
  color: #666666;
}
.grey {
  flex: 1;
  .dlex1-div {
    padding-bottom: 8px;
  }
  .dlex3-div {
    margin-top: 17px;
    margin-bottom: 24px;
  }
  .dlex_img {
    flex-shrink: 0;
    width: 144px;
    height: 81px;
  }

  .select {
    background-image: url("~@/assets/image/sexback.png");
    background-size: 100% 100%;
    border: none !important;
  }
  .dlex_txt {
    width: 140px;
    height: 44px;
    cursor: pointer;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      font-family: PingFang SC;
      justify-content: center;
      color: #333333;
    }
  }
  .dlex_introduce {
    margin-left: 32px;
    flex: 1;
    span {
      display: block;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-top: 8px;
    }
    p {
      font-size: 15px;
      font-family: PingFang SC;
      color: #666666;
      margin-top: 16px;
    }
  }
  .price {
    overflow: hidden;
    margin-top: 19px;
    text-align: right;
  }
}
.dlex_btn {
  width: 120px;
  height: 40px;
  margin-left: 10px;
}
.greyBlue {
  display: inline-block;
}
</style>
